<template>
    <el-table :data="riskStudentData" class="risk-student-table">
        <el-table-column prop="studentname" label="风险学生">
            <template #default="scope">
                <el-link style="color: white" :underline="false" @click="handleClick(scope.row)">{{
                    scope.row.studentname }}</el-link>
            </template>
        </el-table-column>
        <el-table-column prop="class" label="班级" />
        <el-table-column prop="risktags" label="低评分技术tag" />
    </el-table>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps(['data'])

const handleData = ({ studentList }) => {
    const studentAverages = []
    studentList.forEach(stu => {
        const values = Object.values(stu.score)
        const average = values.reduce((total, item) => total + item, 0) / (values.length || 1)
        if (average) {
            studentAverages.push({
                ...stu,
                average
            })
        }
    })

    studentAverages.sort((stuAve1, stuAve2) => stuAve1.average - stuAve2.average)

    return studentAverages.slice(0, 5).map(stuAve => ({
        id: stuAve._id,
        studentname: stuAve.studentname,
        class: stuAve.class.title,
        risktags: Object.entries(stuAve.score).sort((item1, item2) => item1[1] - item2[1]).slice(0, 5).map(item => item[0]).join(' | ')
    }))
}

const riskStudentData = ref([])
onMounted(() => {
    const data = handleData(props.data)
    // console.log(data)
    riskStudentData.value = data
})

const handleClick = stu => {
    router.push(`/student-manage/studentlist?name=${stu.studentname}`)
}
</script>

<style lang="scss" scoped>
.risk-student-table {
    width: 100%;
    height: 90%;
    margin-top: 3%;
    background: url('../../assets/t_bg.png') no-repeat center;
    background-size: 100% 100%;
    color: white;

    :deep(th) {
        background: transparent !important;
        // border: none !important;
        color: white;
    }

    :deep(tr),
    :deep(tr) td {
        background: transparent !important;
        // border: none !important;
    }

    :deep(tr):hover td {
        background: transparent !important;
        // border: none !important;
    }

}
</style>